<template>
  <!-- 个性推荐 -->
  <div class="individuation">
    <scroll ref="scroll"
            class="indici-scroll">
      <swiper :banner='banner' />
      <p>推荐歌单</p>
      <music-list :personList='personalized'
                  @imgLoad='imgLoad' />
      <!-- 独家放送 -->
      <private-content :pri='privateContent'
                       @priImgLoad='priImgLoad' />
    </scroll>
  </div>
</template>

<script>
import Scroll from 'components/common/scroll/Scroll'
import Swiper from 'components/common/swiper/Swiper'
import MusicList from 'components/content/musiclist/MusicList'
import PrivateContent from '../childComps/PrivateContent'
import { _getBanner, _getPersonalized, _getPrivateContent, _getNewSong } from 'network/discover'
import { indexMixin } from 'mixin/indexMixin'
import { ImgMixin } from 'mixin/ImgMixin'
export default {
  name: 'Individuation',
  components: {
    Scroll,
    Swiper,
    MusicList,
    PrivateContent
    // newSongs
  },
  data () {
    return {
      // 轮播图列表
      banner: null,
      // 歌曲列表
      personalized: null,
      limit: 12,
      privateContent: null,
      // 最新歌曲列表
      songList: null,
      // 每一首音乐的细节
      musiclist: []
    }
  },
  created () {
    // 判断是否登录，根据登录获取不同的音乐列表数据
    if (this.$store.state.cookie != null && this.$store.state.cookie != ``) {
      this.limit = 11
    }
    // 获取轮播图所需图片
    _getBanner().then(res => {
      this.banner = res.data.banners.slice(0, 6);
    })
    // 获取歌曲列表
    _getPersonalized(this.limit).then(res => {
      this.personalized = res.data.result
    })
    // 独家播放
    _getPrivateContent().then(res => {
      this.privateContent = res.data
    })
  },
  mixins: [indexMixin, ImgMixin],
  methods: {
    priImgLoad () {
      this.$refs.scroll.refresh()
    }
  }
}
</script>

<style scoped>
.individuation {
  width: 100%;
  height: 100%;
}
.indici-scroll {
  width: 100%;
  height: 100%;
}
p {
  font-size: 20px;
  border-bottom: 1px solid #b8b6b6;
}
</style>
